import type { ReactElement } from 'react';
import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import BasicTable from './components/Table/index';
import BasicForm from './components/Form/index';
import type { IListData, IProps } from './data';
import ScollTable from './components/ScollTable';

function BasicPage(props: IProps, ref: React.Ref<unknown> | undefined): ReactElement {
  const { title, getList, colums, isPaging = true, ...tableProps } = props;
  const [listData, setlistData] = useState<IListData>({ data: [], total: 0 });
  const [loading, setloading] = useState(false);
  const [searchParam, setSearchParam] = useState({});
  const [checkedIds, setCheckedIds] = useState([]);
  const [page, setPage] = useState<any>({
    current: 1,
    pageSize: 10,
  });

  // 搜索项
  const searchColum = colums.filter((item: any) => item.search !== false && item.key !== 'action');
  // 展示列
  const tableColum = colums.filter((item: any) => !item.hideInTable);

  const getPageData = async () => {
    setloading(true);
    const params = isPaging ? { ...searchParam, ...page } : { ...searchParam };
    const { data } = await getList(params);
    setlistData((pre: any) => ({
      data: [...pre.data, ...data.data],
      total: data.total,
    }));
    setloading(false);
  };

  useEffect(() => {
    console.log(listData);

    getPageData();
  }, [page]);

  // 查询触发事件
  const handleSearch = (value: any) => {
    console.log(checkedIds);
    setSearchParam(value);
    setPage((pre: any) => ({
      ...pre,
      current: 1,
    }));
  };

  // 分页触发事件
  const changePage = ({ current, pageSize }: { current: number; pageSize: number }) => {
    setPage({
      current: current,
      pageSize: pageSize,
    });
  };

  // 重置页面
  const resetPage = (type: 'delete' | 'update' | 'reset') => {
    let current = page.current;
    switch (type) {
      // 如果是删除且是本页最后一条,则重置取上一页
      case 'delete':
        current = listData.data.length === 1 ? page.current - 1 : page.current;
        break;
      // 重置回到第一页
      case 'reset':
        current = 1;
        break;
      default:
        break;
    }
    changePage({ current, pageSize: page.pageSize });
  };

  // 传递给父组件 change 方法
  useImperativeHandle(ref, () => ({
    resetPage,
  }));

  return (
    <PageHeaderWrapper title={title}>
      <BasicForm handleSearch={handleSearch} searchFormList={searchColum} />
      {isPaging ? (
        <BasicTable
          listData={listData}
          loading={loading}
          handleChangePage={changePage}
          current={page.page}
          resetPage={resetPage}
          setCheckedIds={setCheckedIds}
          colums={tableColum}
          isPaging={isPaging}
          reload={getPageData}
          {...tableProps}
        />
      ) : (
        <ScollTable
          listData={listData}
          loading={loading}
          handleChangePage={changePage}
          current={page.current}
          resetPage={resetPage}
          setCheckedIds={setCheckedIds}
          colums={tableColum}
          isPaging={isPaging}
          reload={getPageData}
          setPage={setPage}
          {...tableProps}
        />
      )}
    </PageHeaderWrapper>
  );
}
export default forwardRef(BasicPage);
